:root{
        --mantap:#D6A309;
  --primary:#20883A;
}

*{
    border: none;
    text-decoration:none;
    box-sizing: border-box ;
}
nav {
      background-color: #1e293b;
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      position: fixed;              /* ✅ membuat navbar tetap di atas */
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;               /* ✅ pastikan di atas elemen lain */
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    /* Tambahkan ruang di atas konten agar tidak tertutup navbar */
    main {
      padding-top: 70px;
    }
      .logo {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .logo img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .logo span {
      font-size: 20px;
      font-weight: bold;
    }

    .nav-links {
      display: flex;
      gap: 20px;
      align-items: center;
    }

    .nav-links a {
      text-decoration: none;
      color: white;
      font-weight: 500;
      transition: color 0.3s;
    }

    .nav-links a:hover {
      color: #38bdf8;
    }
     nav {
      background-color:var(--);
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      position: fixed;              /* ✅ membuat navbar tetap di atas */
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;               /* ✅ pastikan di atas elemen lain */
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    nav{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index: 9999;
    color:white;
    background-color:var(--primary) ;
}
nav a{
    color:WHITE;
}
.navbar .dropdown-menu li a{
    text-decoration: none;
    color:black;
    transition:all .5s ease;
    font-size:15px;
}
.navbar .dropdown-menu li a:hover{
    color:white;
}
.navbar .dropdown-menu li{
    padding:10px;
}
.navbar .dropdown-menu li:hover{
    background-color:var(--primary);
} 
.navbar-nav{
    gap:20px;
}
.navbar-brand{
    font-size:3rem;
    font-weight:bold;
}
.nav-item{
    font-size:1rem;
}
.navbar-nav .nav-item a{
    font-size:17px;
}


    /* ====== DROPDOWN ====== */
    .hero {
            background: url('/gambar/sekolah6.jpg') no-repeat center center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-shadow: 2px 2px 4px #000;
        }
     .hero {
      width: 100%;
      height: 60vh;
      color: white;
      text-align: center;
      padding: 20px;
      position: relative;
      background-size: cover;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
    }

    .hero-content {
      position: relative;
      z-index: 1;
      width: 100%;
      
    }

    .hero h1 {
      font-size: 3.5rem;
      margin-bottom: 10px;
      font-family: "Raleway", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
   font-weight:bold;
    }

    .hero p {
      font-size: 1.1rem;
      font-family: "Raleway", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
   
    }
    section.program-diniah {
padding: 80px 20px;
background: linear-gradient(180deg, var(--white), var(--light));
}


.container {
max-width: 900px;
margin: 0 auto;
}


.pd-header {
text-align: center;
margin-bottom: 50px;
}


.pd-header h2 {
font-size: 32px;
font-weight: 700;
color: var(--primary);
margin-bottom: 12px;
letter-spacing: 0.5px;
}


.pd-header p {
color: var(--muted);
font-size: 15px;
max-width: 600px;
margin: 0 auto;
}


ol.program-list {
position: relative;
counter-reset: program-counter;
list-style: none;
padding-left: 40px;
}


ol.program-list::before {
content: "";
position: absolute;
top: 0;
left: 15px;
width: 3px;
height: 100%;
background:black;
border-radius: 3px;
}


ol.program-list li {
position: relative;
counter-increment: program-counter;
background: var(--white);
margin-bottom: 30px;
padding: 20px 25px 20px 50px;
border-radius: 12px;
}
@media (max-width: 768px) {
   html{
    font-size:80%;
   }
    }
    @media (max-width:986px){
      html{
        font-size: 80%;
      }
  

    }